<template>
  <div style="padding:20px">
    <el-card>
      <h1>帖子举报列表</h1>
      <el-table :data="Report"
                border
                max-height="700px"
                stripe>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div style="margin-left:50px">
              <h1>【帖子内容】</h1>
              {{scope.row.r_id.main }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="r_id.title"
                         label="帖子标题"
                         min-width="120" />
        <el-table-column prop="username.nickname"
                         label="发布者昵称"
                         min-width="100" />
        <el-table-column prop="username.uid"
                         label="发布者ID"
                         min-width="120" />
        <el-table-column label="发布时间"
                         width="120">
          <template slot-scope="scope">
            {{ TimeToDay(scope.row.r_id.time) }}
          </template>
        </el-table-column>
        <el-table-column prop="username.nickname"
                         label="举报者昵称"
                         min-width="120" />
        <el-table-column prop="username.uid"
                         label="举报者ID"
                         min-width="120" />
        <el-table-column prop="reason"
                         label="举报理由"
                         min-width="120" />
        <el-table-column fixed="right"
                         label="操作"
                         width="250">
          <template slot-scope="scope">
            <el-button type="primary"
                       size="small"
                       @click="BanUser(scope.row.username._id)">封禁发布者</el-button>
            <el-button type="primary"
                       size="small"
                       @click="remove(scope.row)">删除帖子</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      Report: [],
      dialogTableVisible: false,
      comments: [],
      index: ''
    }
  },
  methods: {
    async fetch () {
      await this.$http.get('rest/Report').then(res => {
        this.Report = res.data
      })
    },
    remove (row) {
      this.$confirm('此操作将永久删除该帖子, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(row)
        await this.$http.delete(`rest/Invi/${row.r_id.username._id}/${row.r_id._id}`).then(() => {
          this.fetch()
          this.$message.success('删除帖子成功!')
        })
      })
    },
    BanUser (id) {
      this.$confirm('此操作将永久封禁该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.put(`rest/BanUser/${id}`).then(() => {
          this.$message.success('封禁成功!')
        })
      })
    }
  },
  created () {
    this.fetch()
  },
  computed: {
    TimeToDay () {
      function formatDateTime (inputTime) {
        const date = new Date(inputTime)
        const y = date.getFullYear()
        let m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        let d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        return y + '-' + m + '-' + d
      }
      return time => {
        return `${formatDateTime(parseInt(time))}`
      }
    }
  }
}
</script>
